<!--
  * @Description
  * @Author 莫发达
  * @create 2024-09-19 14:02 周四
-->
<script setup lang="ts">
import { computed, ref } from 'vue'
import { ElMessage } from 'element-plus'
import type { IDict } from '@root/types/system/dict.ts'
import { Search, CopyDocument, DocumentCopy, Document } from '@element-plus/icons-vue'
import { $dictLabel } from '@/utils/dict.ts'
import { openTooltip } from '@shared/base/open'
import { useClipboard } from '@vueuse/core'

const props = defineProps<{
  dict: IDict
}>()

const search = ref('')

const { copy, copied } = useClipboard({ legacy: true })

/**
 *
 */
const computedList = computed(() => {
  const { dict } = props
  return dict?.children.filter(
    (item) => item.dictItemName.includes(search.value) || item.dictItemCode.includes(search.value)
  )
})

/**
 * 鼠标移入提示
 * @param event
 */
function onMouseenter(event: MouseEvent) {
  const target = event.currentTarget as HTMLElement
  const tip = target.dataset.tip

  openTooltip(target, tip, { popperStyle: { maxWidth: 'auto' } })
}

/**
 * 根据给定类型处理指定字典项的复制操作。
 * @param {'code' | 'single' | 'multi'} type - 要执行的复制操作的类型。
 * - 'code'：将项复制为代码。
 * - 'single'：复制项的单个实例。
 * - 'multi'：复制项的多个实例。
 */
async function onCopy(type: 'code' | 'single' | 'multi') {
  const { dict } = props
  let source: string = ''

  switch (type) {
    case 'code':
      // 以 JSON 格式复制字典项
      source = JSON.stringify(
        dict.children.map((item) => ({
          key: item.dictItemCode,
          label: item.dictItemName
        }))
      )
      break
    case 'single':
      // 复制单行字典项，项之间用制表符分隔
      source = [`// 字典 ${dict.dictName}`]
        .concat(dict.children.map((v) => `${v.dictItemCode}:${v.dictItemName}`))
        .join('\t')
      break
    case 'multi':
      // 复制多行字典项，每行独立
      source = [`// 字典\t${dict.dictName}`]
        .concat(dict.children.map((v) => `// ${v.dictItemCode}\t${v.dictItemName}`))
        .join('\n')
      break
  }

  // 执行复制操作
  await copy(source)

  // 显示复制结果消息
  if (copied.value) {
    ElMessage.success('复制成功')
  } else {
    ElMessage.error('复制失败')
  }
}
</script>

<template>
  <article class="flex flex-col gap-4">
    <header class="flex items-center gap-4">
      <h1 class="title flex flex-none items-center gap-x-1 font-bold">
        字典详情 {{ dict?.dictName }}({{ dict?.dictCode }})
      </h1>

      <el-button
        class="ml-auto"
        circle
        :icon="Document"
        data-tip="复制节点代码"
        @mouseenter="onMouseenter"
        @click="onCopy('code')"
      />
      <el-button
        class="!ml-0"
        circle
        :icon="CopyDocument"
        data-tip="复制单行注释"
        @mouseenter="onMouseenter"
        @click="onCopy('single')"
      />
      <el-button
        class="!ml-0"
        circle
        :icon="DocumentCopy"
        data-tip="复制多行注释"
        @mouseenter="onMouseenter"
        @click="onCopy('multi')"
      />

      <el-input
        v-model="search"
        class="w-50"
        placeholder="搜索字典名称/code"
        :suffix-icon="Search"
        clearable
      />
    </header>

    <el-table
      :data="computedList"
      border
    >
      <el-table-column
        type="index"
        label=""
        width="60"
      />
      <el-table-column
        prop="dictItemCode"
        label="字典code"
      />
      <el-table-column
        prop="dictItemName"
        label="字典名称"
      >
        <template #default="{ row }">
          <span>{{ row.dictItemName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="75"
        prop="enableFlag"
        label="状态"
      >
        <template #default="{ row }">
          <!-- 字典 启用/禁用标识	10:启用	20:禁用-->
          <el-tag :type="row.enableFlag === '10' ? 'success' : 'danger'">
            {{ $dictLabel('enableFlag', row.enableFlag) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        width="80"
        prop="dictItemTag"
        label="标签"
      />
    </el-table>
  </article>
</template>

<style scoped lang="less">
.title::before {
  display: inline-block;
  width: 3px;
  height: 16px;
  background: #2d49d1;
  border-radius: 2px;
  content: '';
}
</style>
